<template>
  <div>
    <Button @click="exportData" type="primary" style="margin: 0 10px 10px 0">
      导出日志记录
    </Button>
    <b>
      注：这里只会显示成功保存到服务端的错误日志，而且页面错误日志不会在浏览器持久化存储，刷新页面即会丢失
    </b>
    <Table ref="table" :columns="columns" :data="errorList"></Table>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { mapMutations } from "vuex";
export default {
  name: "error_logger_page",
  data() {
    return {
      columns: [
        {
          type: "index",
          title: "序号",
          width: 100,
        },
        {
          key: "type",
          title: "类型",
          width: 100,
          render: (h, { row }) => {
            // return h(
            //   <div>
            //     <icon
            //       size={16}
            //       type={row.type === "ajax" ? "md-link" : "md-code-working"}
            //     ></icon>
            //   </div>
            // );
          },
        },
        {
          key: "code",
          title: "编码",
          render: (h, { row }) => {
            // return <span>{row.code === 0 ? "-" : row.code}</span>;
          },
        },
        {
          key: "mes",
          title: "信息",
        },
        {
          key: "url",
          title: "URL",
        },
        {
          key: "time",
          title: "时间",
          render: (h, { row }) => {
            // return <span>{dayjs(row.time).format("YYYY-MM-DD HH:mm:ss")}</span>;
          },
          sortable: true,
          sortType: "desc",
        },
      ],
    };
  },
  computed: {
    errorList() {
      return this.$store.state.app.errorList;
    },
  },
  methods: {
    ...mapMutations(["setHasReadErrorLoggerStatus"]),
    exportData() {
      this.$refs.table.exportCsv({
        filename: "错误日志.csv",
      });
    },
  },
  activated() {
    this.setHasReadErrorLoggerStatus();
  },
  mounted() {
    this.setHasReadErrorLoggerStatus();
  },
};
</script>